<template>
  <div class="projectList">
    <div class="widthpage">
      <div class="crumbs">
        <div style="width: 1200px; padding: 20px 0; margin: 0 auto">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item href="" @click.native="$router.push('/')"
              >首页</a-breadcrumb-item
            >
            <a-breadcrumb-item
              href=""
              @click.native="$router.push('/employment/home')"
            >
              就业服务
            </a-breadcrumb-item>
            <a-breadcrumb-item style="color: #ffbe37"
              >创业项目</a-breadcrumb-item
            >
          </a-breadcrumb>
        </div>
      </div>
      <div class="findInput">
        <a-input v-model="itemName" placeholder="请输入创业项目名称" />
        <p class="fildbtn" @click="search()">
          <a-icon type="search" />
          搜索
        </p>
      </div>
      <div class="sort">
        <div @click="selSort(1)" class="newsort">
          <p :style="{'color':orderType == 1?'#ffbe37':'#333333'}">最新排序</p>
          <!-- <img
            v-if="orderType == 1"
            src="@/assets/image/employment/topsort.png"
            alt=""
          />
          <img v-else src="@/assets/image/employment/nosort.png" alt="" /> -->
        </div>
        <div @click="selSort(2)" class="hotsort">
          <p :style="{'color':orderType == 2?'#ffbe37':'#333333'}">热门排序</p>
          <!-- <img
            v-if="orderType == 2"
            src="@/assets/image/employment/topsort.png"
            alt=""
          />
          <img v-else src="@/assets/image/employment/nosort.png" alt="" /> -->
        </div>
      </div>
      <ul class="workList">
        <li
          v-for="(item, index) in chuangyeList"
          :key="index + 'sds'"
          @click="jumpseld(item.itemNo)"
        >
          <div class="img">
            <img
              :src="imageWebUrl + item.photo"
              @error="$event.target.src = GLOBAL.defaultCover"
              alt=""
              class="workImg"
            />
          </div>
          <div class="xaingmumsage">
            <p class="title">
              {{ item.itemName }}
            </p>
            <div class="navs">
              <div class="navlist" v-for="i in item.labels" :key="i + 'wwa'">
                <div>{{ i }}</div>
              </div>
            </div>
            <p class="characteristic">
              <span>项目特点：</span>{{ item.itemTrait }}
            </p>
            <p class="view">{{ item.consultNumber }}人已了解</p>
          </div>
        </li>
      </ul>
    </div>
    <a-empty
      :image="imgUrl"
      :image-style="{
        height: '220px',
      }"
      style="margin: 0 auto; padding: 40px 0"
      v-if="chuangyeList.length < 1 && flag"
    />
    <div v-if="chuangyeList.length > 1" class="cnBottom">
      <div style="margin: 50px auto; width: 230px">
        <a-button @click="more()" v-show="btnState == 1" class="sobtn"
          >点击加载更多</a-button
        >
        <a-button v-show="btnState == 2" :loading="true" class="sobtn"
          >正在加载中</a-button
        >
        <span class="timeTxt1" v-if="btnState == 3">没有更多了</span>
      </div>
    </div>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      btnState: 1,
      // 搜索关键字
      itemName: "",
      chuangyeList: [],
      // 当前页码
      pageIndex: 1,
      orderType: 1,
      flag: false,
      onLoading:false
    };
  },
  methods: {
    // 选择
    selSort(e) {
      if (this.orderType != e) {
        this.chuangyeList = [];
        this.orderType = e;
        this.chuangyeSel(1);
      }
    },
    // 跳转
    jumpseld(e) {
      this.$router.push("/employment/projectDetail?id=" + e);
    },
    // 加载更多
    more() {
      this.btnState = 2;
      this.pageIndex++;
      this.chuangyeSel(this.pageIndex);
    },
    // 搜索
    search() {
      this.chuangyeList = [];
      this.chuangyeSel(1);
    },
    // 创业项目 - 更多列表
    chuangyeSel(e) {
      this.onLoading = true
      this.flag = false;
      let ber = [];
      this.$ajax({
        url: "/entrepreneurial/iteminfo/list",
        method: "post",
        params: {
          itemName: this.itemName, //项目名称
          pageSize: 8, //分页闭区间
          pageIndex: e, //分页开区间
          orderType: this.orderType,
        },
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          ber = res.data.list;
          for (var i in ber) {
            this.chuangyeList.push(ber[i]);
          }
          if (this.pageIndex >= res.data.totalPage) {
            this.btnState = 3;
          } else {
            this.btnState = 1;
          }
        } else {
          this.onLoading = false
          this.chuangyeList = [];
          return false;
        }
      });
    },
  },
  mounted() {
    this.chuangyeSel(this.pageIndex);
  },
};
</script>

<style scoped lang="less">
.timeTxt1 {
  text-align: center;
}
.projectList {
  background-color: #f8f8f8;
  padding-bottom: 50px;
  .widthpage {
    width: 1200px;
    margin: 0 auto;
  }
  .crumbs {
    height: 57px;
    line-height: 57px;
  }
  .findInput {
    width: 450px;
    height: 44px;
    border: 1px solid #999999;
    border-right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    input {
      border: 0;
      background-color: #f8f8f8;
      padding-left: 16px;
      ::-webkit-input-placeholder {
        color: #999999;
      } /* 使用webkit内核的浏览器 */
      :-moz-placeholder {
        color: #999999;
      } /* Firefox版本4-18 */
      ::-moz-placeholder {
        color: #999999;
      } /* Firefox版本19+ */
      :-ms-input-placeholder {
        color: #999999;
      } /* IE浏览器 */
    }
    .ant-input {
      outline: none;
      box-shadow: none;
    }
    .fildbtn {
      width: 88px;
      height: 44px;
      background-color: #ffbe37;
      text-align: center;
      line-height: 44px;
      cursor: pointer;
      color: #333333;
      font-size: 15px;
    }
  }
  .sort {
    width: 1200px;
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-color: #ffffff;
    margin-top: 30px;
    .newsort,
    .hotsort {
      margin-right: 40px;
      display: flex;
      cursor: pointer;
      p {
        margin-right: 8px;
      }
      img {
        width: 8px;
      }
    }
  }
  .workList {
    margin-top: 20px;
    li {
      cursor: pointer;
      background-color: #ffffff;
      display: flex;
      padding: 12px 20px;
      margin-bottom: 20px;
      box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
      .img {
        width: 271px;
        // height: 187px;
        overflow: hidden;
        .workImg {
          width: 271px;
          // height: 187px;
          transition: transform 0.5s linear;
        }
      }
      .img:hover {
        img {
          transform: scale(1.1);
        }
      }
      .xaingmumsage {
        flex: 1;
        padding-left: 32px;
        padding-top: 13px;
        .title {
          color: #333333;
          font-size: 20px;
          line-height: 24px;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .navs {
          display: flex;
          margin-top: 8px;
          .navlist {
            background-color: #ffbe37;
            padding: 2.5px 10px 1px;
            height: 23px;
            margin-right: 16px;
            text-align: center;
            transform: skewX(-25deg);
          }
          .navlist > div {
            color: #232d32;
            transform: skewX(25deg);
            font-size: 12px;
            font-weight: bold;
            line-height: 17px;
            white-space: nowrap;
          }
          p {
            padding: 0 15px;
            border: 1px solid #ffbe37;
            line-height: 24px;
            margin-right: 16px;
            color: #ffbe37;
            font-size: 12px;
          }
        }
        .characteristic {
          color: #333333;
          font-size: 15px;
          line-height: 24px;
          margin-top: 8px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          span {
            font-weight: bold;
          }
        }
        .view {
          margin-top: 24px;
          color: #ffbe37;
          font-weight: bold;
          font-size: 13px;
          line-height: 18px;
        }
      }
    }
  }
}
</style>
